<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        label{

            position:relative;

            display:inline-block;

            cursor:pointer;

        }

        label>input{

            display:none;

        }

        .radio-inner{

            position:relative;

            padding-left:35px;

        }

        .radio-inner:before{

            content:'';

            position:absolute;

            width:20px;

            height:20px;

            top:0;

            left:0;

            border:1px solid #d9d9d9;

            border-radius:50%;

        }

        .radio-inner:after{

            content:'';

            position:absolute;

            width:10px;

            height:10px;

            top:6px;

            left:6px;

            background:#fff;

            border-radius:50%;

        }

        label>input:checked+.radio-inner:before{

            border-color:#009a61;

        }

        label>input:checked+.radio-inner:after{

            background:#009a61;

        }


    </style>
</head>
<body>

<label for="mychecks1">
    <input type="radio" id="mychecks1"  name="s">
    <span class="radio-inner"></span>
    男
</label>
<label for="mychecks">
    <input type="radio" id="mychecks"  class="radio-inner" name="s">
    <span class="radio-inner"></span>
    女
</label>
</body>
</html>